<template>
  <div class="nav">
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="4">
          <a class="logo" href="/#/index">
            <img src="/imgs/mi-logo.png" alt="logo">
            <img src="/imgs/mi-home.png" alt="logo">
          </a>
        </el-col>
        <el-col :span="12">
          <div class="menu">
            <div class="menu-item" v-for="item of list" :key="item.id">
              <a href="" class="active">{{item.name}}</a>
              <div class="nav-dropdown">
                <ul class="wrap">
                  <li class="item" v-for="(inner_item, index) of item.innerlist" :key="'inner'+index" @click="goToDetail(inner_item.id)">
                    <div class="img">
                      <img v-lazy="inner_item.img" alt="">
                    </div>
                    <span class="title">{{inner_item.title}}</span>
                    <span class="price">{{inner_item.price}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="search-box">
            <input type="text">
            <i class="el-icon-search search-icon"></i>
          </div>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

<script>
export default {
  name: 'HomeNav',
  data () {
    return {
      list: [
        {
          id: 1,
          name: '小米手机',
          innerlist: [
            {
              id: '1001001',
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10至尊纪念版',
              price: '5299元起'
            },
            {
              id: '1001002',
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10 Pro',
              price: '4999元起'
            },
            {
              id: '1001003',
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10',
              price: '3799元起'
            },
            {
              id: '1001004',
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10',
              price: '3799元起'
            },
            {
              id: '1001005',
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10',
              price: '3799元起'
            },
            {
              id: '1001006',
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10',
              price: '3799元起'
            },
            {
              id: '1001007',
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90',
              title: '小米10',
              price: '3799元起'
            }
          ]
        },
        {
          id: 2,
          name: '红米手机',
          innerlist: [
            {
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 至尊纪念版',
              price: '1999元起'
            },
            {
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0203f4e7dafcc0c9016a1b48556abf30.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 Pro 系列',
              price: '2699元起'
            },
            {
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cff2977b8aab1e43b94b2f00083f4ae1.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 系列',
              price: '1399元起'
            },
            {
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cff2977b8aab1e43b94b2f00083f4ae1.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 系列',
              price: '1399元起'
            },
            {
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cff2977b8aab1e43b94b2f00083f4ae1.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 系列',
              price: '1399元起'
            },
            {
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cff2977b8aab1e43b94b2f00083f4ae1.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 系列',
              price: '1399元起'
            },
            {
              img: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cff2977b8aab1e43b94b2f00083f4ae1.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              title: 'Redmi K30 系列',
              price: '1399元起'
            }
          ]
        }
      ]
    }
  },
  methods: {
    goToDetail (id) {
      this.$router.push({
        name: 'detail',
        params: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  padding-top: 29px;
  min-width: 1226px;
  position: relative;

  .container {
    width: 1226px;
    margin: 0 auto;
    line-height: 52px;

    .logo {
      width: 53px;
      height: 52px;
      display: flex;
      background: #ff6600;
      /*overflow: hidden;*/
      &:hover {
        img {
          transform: translateX(-100%);
        }

      }

      img {
        width: 100%;
        transition: .2s linear;
      }
    }

    .menu {
      display: flex;

      .menu-item {
        display: inline-block;
        margin-left: 20px;
        padding-bottom: 40px;

        a {
          font-size: 16px;
          font-family: FZLanTingHeiS-R-GB;
          font-weight: bold;
          color: #343434;
        }

        &:hover {
          a {
            color: #ff6600;
          }

          .nav-dropdown {
            height: 220px;
            opacity: 1;
          }
        }
      }

      .nav-dropdown {
        position: absolute;
        left: 0;
        top: 100%;
        /*width: 1246px;*/
        width: 100%;
        height: 0;
        border-top: 1px solid #e5e5e5;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: 1px 7px 6px 0px rgba(0, 0, 0, 0.11);
        display: block;
        background: #ffffff;
        z-index: 5;
        opacity: 0;
        transition: all .5s;

        .wrap {
          display: flex;
          padding: 26px 56px 0 56px;

          .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            &:hover {
              cursor: pointer;
            }

            &:after {
              content: '';
              display: inline-block;
              position: absolute;
              right: 0;
              top: 0;
              width: 1px;
              height: 99px;
              background: #d8d8d8;
            }

            &:last-child {
              &:after {
                display: none;
              }
            }
          }

          .img {
            height: 111px;

            img {
              height: 100%;
            }
          }

          .title {
            display: block;
            width: 32px;
            height: 12px;
            font-size: 12px;
            font-family: FZLanTingHeiS-R-GB;
            font-weight: bold;
            color: #343434;
            line-height: 60px;
          }

          .price {
            width: 43px;
            height: 12px;
            font-size: 12px;
            font-family: FZLanTingHeiS-R-GB;
            font-weight: bold;
            color: #ff6600;
            line-height: 60px;
            text-align: center;
            margin-top: 5px;
          }
        }

      }
    }

    .search-box {
      float: right;
      border: 1px solid #e0e0e0;

      input {
        width: 264px;
        height: 46px;
        line-height: 50px;
        padding: 0;
        outline: none;
        border: none;
        text-indent: 1em;
        font-size: 18px;
        color: #666666;
      }

      .el-icon-search {
        width: 53px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-left: 1px solid #e0e0e0;
      }
    }
  }
}
</style>
